<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body" style="height: 100%">
        <!--首行，标题-->
        <div class="d-flex jc-center row title_wrap" style="height: 50px">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
            <div class="title">
              <dv-decoration-1 class="dv-dec-1" />
              <span class="title-text colorFont" style="width: 100% ; font-size: 30px;">产线设备可视化平台</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColor"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行
        d-flex= display:flex, 设置该div为flex流式容器
        jc-between = justify-content: space-between;  /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */
        aside-width=width: 40%;
        -->
        <div class="d-flex jc-between px-2 row" style="height: 50px">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s" style="width: 80%">
              <span class="react-left"></span>
              <span class="text purPleTitle" style="font-size: large;font-weight: bold;">机台状态</span>
              <div class="text statusGreen statusBall" style="margin-left: 20px">正常</div>
              <div class="text statusYellow statusBall" style="margin-left: 20px">警告</div>
              <div class="text statusRed statusBall" style="margin-left: 20px">问题</div>
            </div>
            <!--
            <div class="react-left ml-3">
              <span class="text">数据分析2</span>
            </div>-->
          </div>
          <div class="d-flex aside-width" style="justify-content: flex-end">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b colorFont">东颂智慧屏</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text" style="color: #ffc107"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              >
            </div>
          </div>
        </div>

        <div class="body-box" style="height: 964px">
          <!-- 第三行数据 -->
            <!--生产线区域--->
            <div style="height: 60%">
              <dv-border-box-13 style="height: 20%">
                <bottomLeft lineName="产线1" />
              </dv-border-box-13>
              <dv-border-box-13 style="height: 20%">
                <bottomLeft lineName="产线2" />
              </dv-border-box-13>
              <dv-border-box-13 style="height: 20%">
                <bottomLeft lineName="产线3" />
              </dv-border-box-13>
              <dv-border-box-13 style="height: 20%">
                <bottomLeft lineName="产线4" />
              </dv-border-box-13>
              <dv-border-box-13 style="height: 20%">
                <bottomLeft lineName="产线5" />
              </dv-border-box-13>
            </div>

          <!-- 第四行数据 -->
            <div class="d-flex jc-between"  style="height: 40%;margin-bottom: 15px">

              <dv-border-box-12  >
                <cctv lineName="监控1"/>
              </dv-border-box-12>

              <dv-border-box-12 >
                <cctv lineName="监控2"/>
              </dv-border-box-12>

             <dv-border-box-12 >
               <cctv lineName="监控3"/>
            </dv-border-box-12>

            <dv-border-box-12 >
              <cctv lineName="监控4"/>
            </dv-border-box-12>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../../utils/drawMixin";
import { formatTime } from '../../utils/index.js'
//import centerLeft1 from './centerLeft1'
//import centerLeft2 from './centerLeft2'

import bottomLeft from './bottomLeft'
import cctv from './cctv'
export default {
  mixins: [ drawMixin ],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000']
    }
  },
  components: {
    bottomLeft,
    cctv
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
    setTimeout(()=>{
      let rows=document.getElementsByClassName("row")
      let rowsHeight=0
      for (let i=0 ;i< rows.length;i++) {
        rowsHeight+=rows[i].clientHeight
      }
      let lastRowHeight=document.getElementsByClassName("host-body")[0].clientHeight-rowsHeight;
      //alert(lastRowHeight)
      document.getElementsByClassName("body-box")[0].style.height=lastRowHeight+'px'
      this.$nextTick(()=>{
      })
    },1000)

  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {

    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
console.log(window.opener)
/*if (window.opener==undefined){
  window.open(window.location.href,'newwindow',
          'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+
          ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')

}*/
</script>

<style lang="scss" scoped>

@import '../../assets/m1/index.scss';
  .leftChart1{
    width: 22%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }
.title {
  position: relative;
  // width: 500px;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 60px;
  line-height: 46px;

  .title-text {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 6px;
    width: 100%;
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
  .purPleTitle{
    font-size: large;
    font-weight: bold;
    background-color: #562fde;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0px 10px
  }
.statusBall{
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 30px;
}
  .statusYellow{
    background-image: url("../../assets/img/state.png");
  }
.statusGreen{
  background-image: url("../../assets/img/state1.png");
}
.statusRed{
  background-image: url("../../assets/img/state2.png");
}
</style>
